<!--
*@Author: QWP
*@Description: 综合预警
*@Date: 2024-07-18 14:05:35
-->
<template>
  <u-card title="综合预警">
    <a-list :grid="{ gutter: 12, column: 3 }" :data-source="warningLevDatas">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-row :gutter="12" @click="toSumWarning">
            <a-space>
              <a-image :src="item.iconImg" :preview="false" width="50px"></a-image>
              <div>
                <span>{{ item.label }}</span>
                <div>
                  <span :style="{color: item.color}"
                    style="font-size: 28px;">{{ item.value }}</span>
                  <span> 个 </span>
                </div>
              </div>
            </a-space>
          </a-row>
        </a-list-item>
      </template>
    </a-list>
    <USegmented :data="segmentedData"
      :activeKey.sync="activeKey"
      @click="(item) => activeKey = item.id">
    </USegmented>
    <template v-if="activeKey == '1'"> 
      <u-table :columns="regionCols"
        :data="regionDatas"
        :pagination="false"
        :scroll="{ y: $attrs['y'] || 400 }"></u-table>
    </template>
    <template v-else-if="activeKey == '2'">
      <u-table :columns="typeCols"
        :data="typeDatas"
        :pagination="false"
        :scroll="{ y: $attrs['y'] || 400 }"></u-table>
    </template>
  </u-card>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch, onMounted, h } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { getColor, levMainColor } from '@/views/index/emergencyIndex/data'
import USegmented from '@/views/index/emergencyIndex/component/segmented/Index.vue'
import { ColumnProps } from 'ant-design-vue/es/table'
import { ThunderboltOutlined } from '@ant-design/icons-vue'
import { urlFile } from '@/util/common'

const router = useRouter();

const warningLevDatas = reactive([
  { key: '1', label: '一级预警', value: 5, total: 50, color: '#FAB410', iconImg: urlFile("warningIndex/lamp1.gif") },
  { key: '2', label: '二级预警', value: 15, total: 50, color: '#FF8940', iconImg: urlFile("warningIndex/lamp2.gif")  },
  { key: '3', label: '三级预警', value: 30, total: 50, color: '#FF4D4F', iconImg: urlFile("warningIndex/lamp3.gif")  },
])

const state = reactive({
  levelColor: {}
})

watch(() => store.getters['emergencyStore/getLevel'], (nval, oval) => {
  state.levelColor = getColor(nval)
}, { immediate: true }) 

let activeKey = ref<string>('1')
const segmentedData = reactive([
  {label: '分地区预警情况', id: '1', },
  {label: '分企业类型预警情况', id: '2'}
]);

onMounted(() => {
  for(let i = 0; i < 21; i++) {
    regionDatas.push({ 
      index1: i+1, 
      dq: `地区${i+1}`, 
      qylx: `企业类型${i+1}`, 
      lev1: Math.floor(Math.random() * 60),
      lev2: Math.floor(Math.random() * 60),
      lev3: Math.floor(Math.random() * 60),
    })
    typeDatas.push({ 
      index1: i+1, 
      dq: `地区${i+1}`, 
      qylx: `企业类型${i+1}`, 
      lev1: Math.floor(Math.random() * 60),
      lev2: Math.floor(Math.random() * 60),
      lev3: Math.floor(Math.random() * 60),
    })
  }
})

let regionDatas = reactive<any[]>([]);
const regionCols = reactive<ColumnProps[]>([
  { title: '序号', dataIndex: 'index1', width: 50 },
  { title: '地区', dataIndex: 'dq', minWidth: 100 },
  { title: '一级', dataIndex: 'lev1', width: 100, align: 'center',
    customRender: ({ text }) => {
      return h("div", { style: { cursor: 'pointer' }, onclick: () => toSumWarning() }, [
        h(ThunderboltOutlined, { style: { color: levMainColor[0] } }),
        h('span', { style: {marginLeft: '6px'} }, text)
      ])
    }
  },
  { title: '二级', dataIndex: 'lev2', width: 100, align: 'center',
    customRender: ({ text }) => {
      return h("div",{ style: { cursor: 'pointer' }, onclick: () => toSumWarning() },  [
        h(ThunderboltOutlined, { style: { color: levMainColor[1] } }),
        h('span', { style: {marginLeft: '6px'} }, text)
      ])
    } 
  },
  { title: '三级', dataIndex: 'lev3', width: 100, align: 'center',
    customRender: ({ text }) => {
      return h("div",{ style: { cursor: 'pointer' }, onclick: () => toSumWarning() }, [
        h(ThunderboltOutlined, { style: { color: levMainColor[2] } }),
        h('span', { style: {marginLeft: '6px'} }, text)
      ])
    }
  },
])

let typeDatas = reactive<any[]>([]);
const typeCols = reactive<ColumnProps[]>([
  { title: '序号', dataIndex: 'index1', width: 50 },
  { title: '企业类型', dataIndex: 'qylx', minWidth: 100 },
  { title: '一级', dataIndex: 'lev1', width: 100, align: 'center',
    customRender: ({ text }) => {
      return h("div", {}, [
        h(ThunderboltOutlined, { style: { color: levMainColor[0] } }),
        h('span', { style: {marginLeft: '6px'} }, text)
      ])
    }
  },
  { title: '二级', dataIndex: 'lev2', width: 100, align: 'center',
    customRender: ({ text }) => {
      return h("div", {}, [
        h(ThunderboltOutlined, { style: { color: levMainColor[1] } }),
        h('span', { style: {marginLeft: '6px'} }, text)
      ])
    } 
  },
  { title: '三级', dataIndex: 'lev3', width: 100, align: 'center',
    customRender: ({ text }) => {
      return h("div", {}, [
        h(ThunderboltOutlined, { style: { color: levMainColor[2] } }),
        h('span', { style: {marginLeft: '6px'} }, text)
      ])
    }
  },
])

// 跳转至综合预警
const toSumWarning = () => {
  router.push({
    path: '/TransitIndex/SumWarning',
    query: {
      _tab: 1
    }
  })
}


</script>

<style lang='scss' scoped>
</style>